<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="/WEB-INF/html.tld" prefix="html" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>


<c:url var="rateCardsJsonObject" value="${util.en('/finance/ratecards/json')}" />
<c:url var="addRateard" value="${util.en('/finance/ratecard/add')}" />


			<div class="content-backgroud">
<form:form id="financialProduct" modelAttribute ="financial" method="POST"  name="rateCard">
	<html:table attributes="class='inputTable'">
		  <html:tr>
		    <html:td><label><spring:message code="label.name" /></label></html:td>
		    <html:td><label><spring:message code="label.description" /></label></html:td>
		    <html:td><label><spring:message code="label.min.amount" /></label></html:td>
		    <html:td><label><spring:message code="label.max.amount" /></label></html:td>
		  </html:tr>
		  <html:tr>
		    <html:td><form:input path="ratecard.name" name="ratecard.name"></form:input></html:td>
		    <html:td><form:input path="ratecard.description" name="ratecard.description" class='required'></form:input></html:td>
		    <html:td><form:input path='ratecard.minAmount' name='ratecard.minAmount' class=" required amount"></form:input></html:td>
		    <html:td><form:input path='ratecard.maxAmount' name='ratecard.maxAmount' class=" required amount"></form:input></html:td>
		  </html:tr>
		  
		   <html:tr>
		    
		    <html:td><label><spring:message code="label.effective.date" /></label></html:td>
		    <html:td><label><spring:message code="label.expiry.date" /></label></html:td>
		    <html:td><label></label></html:td>
		    <html:td><label></label></html:td>
		  </html:tr>
		  <html:tr>
		    <html:td><form:input path='ratecard.effectiveDate' name='ratecard.effectiveDate' class="date required"></form:input></html:td>
		    <html:td><form:input path='ratecard.expiryDate' name='ratecard.expiryDate' class="date required"></form:input></html:td>
		    <html:td><label></label></html:td>
		    <html:td><label></label></html:td>
		  </html:tr>
		 
		  <html:tr>
		   
		   
		
		   <html:td><button type="button" class="mediumButton"  id="btnAddRateCard">Submit</button><a class="mediumButton" href="javascript:cancelForm();">Cancel</a></html:td>
		  </html:tr>
	</html:table>
	 <form:hidden path="financial.financialProductId"  name="financial.financialProductId"/>
	 <form:hidden path="ratecard.rateCardId"  name="ratecard.rateCardId"/>
</form:form>
<div id="rateCardView"></div>
</div>

<script>
$(function () {
	  $(".date").datepicker();
	  $("select").chosen({width: "100%"});
	  //if($("input[name='financial.financialProductId']").val()=="")
		  //$("input, select, button").attr('disabled',true);
	var colM = [

{dataType: "string",dataIndx: "name", title: "Name",  width: 200},
{dataType: "string",dataIndx: "minAmount", title: "Lower Amount", width: 100},
{dataType: "string",dataIndx: "maxAmount", title: "Upper Amount", width: 100},
{dataType: "string",dataIndx: "effectiveDate", title: "Effective Date",  width: 100},
{dataType: "string",dataIndx: "expiryDate", title: "Expiry Date", field: "expiryDate", width: 100},
{dataType: "string",dataIndx: "description", title: "Description", width: 150}

	];
	  
	var dataModel = {
		        location: "remote",
		        sorting: "remote",
		      /*   paging: "remote", */ /* this will enable to show the pagination */
		        dataType: "JSON",
		        method: "GET",
		        curPage: 1,
		        getUrl: function () {
		            var sortDir = (this.sortDir == "up") ? "asc" : "desc";
		            var sort = ['userId', 'userName', 'firstName', 'lastName', 'languageCode', 'userStatus'];
		            return { url: "${rateCardsJsonObject}", data: "cur_page=" + this.curPage + "&records_per_page=" + 
		                this.rPP + "&sortBy=" + sort[this.sortIndx] + "&dir=" + sortDir+ "&financial.financialProductId=" + $("input[name='financial.financialProductId']").val() };
		        },
		        getData: function (dataJSON) {
		            
		            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: dataJSON };                
		        }
		    };
	    var $grid1 = $("div#rateCardView").pqGrid({ width: "auto",
		        dataModel: dataModel,
		        colModel: colM,
		       /*  resizable: true,   */          
		        columnBorders: true,
		        flexHeight: true,
		        /*flexWidth: true, */
	            editable: true,
	            scrollModel: { horizontal: true },
	            topVisible:true
		        
		    });
	    //for details
	     $.extend(colM[0], {
	    render: function (ui) {
	        var rowData = ui.rowData;
	     
	            return '<a href="javascript:loadObject(\''+rowData.rateCardId+'\',\'rateCardView\');">' + rowData.name+'</a>';
	       
	    }
	  });
	    //for edit
	    $.extend(colM[1], {
	  	  render: function (ui) {
	  	      var rowData = ui.rowData;
	  	   
	  	          return '<a href="javascript:editObject(\''+rowData.rateCardId+'\',\'ratecard.rateCardId\');">' + rowData.minAmount+'</a>';
	  	     
	  	  }
	  	}); 


$("#btnAddRateCard").on("click",function(){
	
	submitForm();
	return false;
});
    function onSuccess(result)
    {
    	console.log(result);
    	 var DM = $grid1.pqGrid("option", "dataModel");
         var data = DM.data;
         var temp=[];
         temp[0]=result.name;
         temp[1]=result.description;
         temp[2]=result.effectiveDate;
         temp[3]=result.expiryDate;
         console.log(temp);
         data.push(temp);
         console.log(data);
         $grid1.pqGrid("refreshDataAndView");
         
         $("input[name='ratecard.rateCardId']").val(result.rateCardId);
       //TODO:ajax error rendering put it on common place
      	$( result.fieldError).each(function() {
     		console.log(this.field);
     		$('input[name="'+this.field+'"]').css( "border",'1px solid red' );
     	});
    }
    
   

 function submitForm()
{
	 $('.amount').inputmask('remove');
		
		jQuery.ajaxSettings.traditional = true;

		var formData = $("#financialProduct").serializeObject();
		//formData.rateCards=assignedRate;

		var params={url:"${addRateard}",success:onSuccess,data:formData,type:"POST",dataType:"json"};
		doAjax(params);
}

});

function loadObject(objectId, ObjectType)
{
	$("input[name='ratecard.rateCardId']").val(objectId);
	console.log("rateCard Id = "+objectId);
	
}
</script>

